<%@page import="com.github.pagehelper.PageInfo"%>
<%@page import="com.yunzhong.appointment.entity.SysUser"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>云众科技网上预约挂号系统</title>
		<style type="text/css">

			input{
				border: 1px solid #ccc;
				padding: 7px 0px;
				border-radius: 3px; /*css3属性IE不支持*/
				padding-left:5px;
				width: 60px;
				height: 30px;
			}

		</style>

	</head>

	<body>
	<br>
		<div>

			<input type="text" id="datefix" readonly onclick="selectYear()"  >
			<button type="button" class="btn btn-primary" id="createExcel" onclick="createToExcel()">导出Excel</button>
		</div>
	<div style="display: none" >
		<table id="datatable" class="table table-hover table-striped table-condensed text-center"  >
			<tr class="bg-default">
				<td>科室名称</td>
				<td>科室名称预约量</td>
			</tr>
			<tbody id="tboby"></tbody>
		</table>
	</div>

<%--	<table class="table table-bordered table-hover definewidth m10" display:none; id="test_table">--%>
<%--	</table>--%>





	<br>
		<div id="main" style="width: 100%;height: 400px;"></div>
	</body>
	<script type="text/javascript">

		var myChart=echarts.init(document.getElementById("main"));

		var dataAxis = [];
		var data = [];
		var yMax = 12000;
		var dataShadow = [];
		for (var i = 0; i < data.length; i++) {
			dataShadow.push(yMax);
		}

		option = {
			title: {
				text: '年度科室预约统计'
			},
			xAxis: {
				data: dataAxis,
				axisLabel: {
					inside: true,
					textStyle: {
						color: '#fff'
					}
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				z: 10
			},
			yAxis: {
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					textStyle: {
						color: '#999'
					}
				}
			},
			dataZoom: [
				{
					type: 'inside'
				}
			],

			series: [
				{ // For shadow
					name:"科室",
					type: 'bar',
					itemStyle: {
						normal: {color: 'rgba(0,0,0,0.05)'}
					},
					barGap:'-100%',
					barCategoryGap:'40%',
					data: dataShadow,
					animation: false
				},
				{
					type: 'bar',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#83bff6'},
										{offset: 0.5, color: '#188df0'},
										{offset: 1, color: '#188df0'}
									]
							)
						},
						emphasis: {
							color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#2378f7'},
										{offset: 0.7, color: '#2378f7'},
										{offset: 1, color: '#83bff6'}
									]
							)
						}
					},
					data: data,
					name:"预约数"
				}
			]
		};

		// Enable data zoom when user click bar.
		var zoomSize = 6;
		myChart.on('click', function (params) {
			console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
			myChart.dispatchAction({
				type: 'dataZoom',
				startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
				endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
			});
		});

		myChart.setOption(option);
	//对用户进行授权
	function auth(id){
		location.href = "/sys/authUser?id="+id;
	}


			var date=new Date();
	$("#datefix").val(date.getFullYear())
		$(function () {
			var date1=new Date();
			$("#datefix").val(date1.getFullYear())
			queryCountByDept($("#datefix").val());
		})
			var year=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay();
			function selectYear(){
				$("#datefix").jeDate({
					maxDate: year,
					format:"YYYY",
					zIndex:3000,
					choosefun:function (a,b,c) {
						queryCountByDept(b)
					}
				})
			}




		function queryCountByDept(inp) {
			// zg.wait("open")
			var data1=inp;
			var url1="/forms/view"
			$.post(url1,{"data1":data1},function (respDate) {
                // for (var i = 0; i <dataAxis.length ; i++) {
                //   delete  dataAxis[i];
                //     delete data[i];
                // }
				// zg.wait("close");
				$("#tboby").empty();
				var dataAxis = [];
				var data = [];
				for (var key in respDate) {
					dataAxis.push(key);
                    data.push(respDate[key]);
					var td1="<td>"+key+"</td>";
					var td2="<td>"+respDate[key]+"</td>";
					var tr="<tr>"+td1+td2+"</tr>";
					$("#tboby").append(tr);
				}
				option.xAxis.data = dataAxis;
				option.series[1].data = data;
				myChart.setOption(option,true);
			},"json")

		}







		function createToExcel(){
			var year =$("#datefix");
			var ayear=year.val();
			var url ="/forms/queryDataForExcel";
			var data={"appyear":ayear};
			$.post(url,data,function(r){
				var reportName=ayear+"年度科室预约统计";
				bootbox.alert(reportName);
				if (r.length>0) {
					var deptNames=[]
					var deptCounts=[]

					for (var key in respDate) {
						deptNames.push(key);
						deptCounts.push(respDate[key]);

					}
					createToFileExcel(reportName,deptNames,deptCounts);
				}

			},"json")
		}
		//使用table2excel导出excel表格
		$("#createExcel").click(function(){
			var year =$("#datefix");
			var ayear=year.val();
			console.log(1);
			$("#datatable").table2excel({   			// table2excel插件的可用配置参数有：
				exclude: ".noExl",  					//  exclude：不被导出的表格行的CSS class类。
				name: "Excel Document Name",    		// name：导出的Excel文档的名称。
				filename: ayear+"年科室预约统计表.xls",   	//filename：Excel文件的名称。
				exclude_img: true,  				    //exclude_img：是否导出图片。
				exclude_links: true,  					// exclude_links：是否导出超链接
				exclude_inputs: true  					// exclude_inputs：是否导出输入框中的内容。
			});
		})

		// $(document).ready(function(){
		// 	excel = new ExcelGen({
		// 		"src_id":"test_table",//table的id
		// 		"show_header":true
		// 	});
		// 	$("#datefix").click(function () {
		// 		excel.generate();//执行导入包中的方法。
		// 	})
		// });
	</script>
</html>